medicap

Medical Health & Pregnancy Care Clinic HTML Template

Installation

Follow the steps below to get started with medicap Medical Health & Pregnancy Care Clinic HTML Template  :

  1. Open the Package/medicap Folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP or cPanle in order to use it on your Website.
  3. Make sure you have upload the required files and folders listed below:
    • medicap HTML/assets - Stylesheets, JavaScript, Fonts etc Folder 
    • medicap HTML/assets/images - Images Folder  
    • medicap HTML/index.html - Index File/Homepage
    The other files can be used according to your preferences.
  4. You're now ready to go..! Start adding your Content and show off your Brand New Website.

Features At A Glance

  1. HTML5 & CSS3 & jQuery
  2. Modern And Creative Design
  3. Universal menu
  4. 100% Responsive
  5. Well documented
  6. Complete SASS files
  7. Bootstrap 4
  8. IcoFont Used
  9. SwiperSlider Used
  10. Google Font Used
  11. Lightcase Used
  12. Google Map
  13. Eye Catching Design
  14. W3C Valid Code

HTML Structure

medicap has follows a simple coding structure. here is the sample:

 

						


	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- favicon -->
	<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png">

	<!-- link of css -->
	<link rel="stylesheet" href="assets/css/animate.css">
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/css/icofont.min.css">
	<link rel="stylesheet" href="assets/css/lightcase.css">
	<link rel="stylesheet" href="assets/css/swiper.min.css">
	<link rel="stylesheet" href="assets/css/style.css">
	<title>medicap</title>
	</head>
	<body>
	<div class="body-wrap">
	<div class="shape-1"></div>
	<div class="shape-2"></div>
	<!--search area-->
	<div class="search-input">
	<div class="search-close">
	<i class="icofont-close-circled"></i>
	</div>
	<form>
	<input type="text" name="text" placeholder="Search Heare">
	<button class="search-btn" type="submit">
	<i class="icofont-search-2"></i>
	</button>
	</form>
	</div>
	<!-- search area -->

	<!-- Mobile Menu Start Here -->
	<div class="mobile-menu transparent-header">
	<nav class="mobile-header">
	<div class="header-logo">
	<a href="index.html"><img src="assets/images/logo/01.png" alt="logo"></a>
	</div>
	<div class="header-bar">
	<span></span>
	<span></span>
	<span></span>
	</div>
	</nav>
	<nav class="mobile-menu">
	<div class="mobile-menu-area">
	<div class="mobile-menu-area-inner">
	<ul class="lab-ul">
	<li class="active">
	<a href="#0">Home</a>
	<ul class="lab-ul">
	<li class="active"><a href="index.html">Home Page One</a></li>
	<li><a href="index-2.html">Home Page Two</a></li>
	</ul>
	</li>
	<li><a href="about.html">About</a></li>
	<li>
	<a href="#0">Pages</a>
	<ul class="lab-ul">
	<li>
	<a href="#0">Services</a>
	<ul class="lab-ul">
	<li><a href="service.html">Service</a></li>
	<li><a href="service-single.html">Service Single</a></li>
	</ul>
	</li>
	<li>
	<a href="#0">Portfolios</a>
	<ul class="lab-ul">
	<li><a href="portfolio.html">Portfolio style 1</a></li>
	<li><a href="portfolio-2.html">Portfolio style 2</a></li>
	<li><a href="portfolio-single.html">Portfolio style 3</a></li>
	</ul>
	</li>
	<li><a href="team.html">Team Membar</a></li>
	<li><a href="timetable.html">Time Table</a></li>
	<li><a href="history.html">History Page</a></li>
	<li><a href="404.html">404 Page</a></li>
	</ul>
	</li>
	<li>
	<a href="#0">Blog</a>
	<ul class="lab-ul">
	<li><a href="blog.html">Blog Style 1</a></li>
	<li><a href="blog-2.html">Blog style 2</a></li>
	<li><a href="blog-3.html">Blog style 3</a></li>
	<li><a href="blog-single.html">Blog Details</a></li>
	</ul>
	</li>
	<li>
	<a href="#0">Shop</a>
	<ul class="lab-ul">
	<li><a href="shop.html">Products Page</a></li>
	<li><a href="shop-single.html">Products Details</a></li>
	<li><a href="cart-page.html">Cart Page</a></li>
	</ul>
	</li>
	<li><a href="contact.html">Contact</a></li>
	</ul>
	</div>
	</div>
	</nav>
	</div>
	<!-- Mobile Menu Ending Here -->

	<!-- desktop menu start here -->
	<header class="header-section">
	<div class="header-area">
	<div class="container">
	<div class="primary-menu">
	<div class="logo py-2">
	<a href="index.html"><img src="assets/images/logo/01.png" alt="logo"></a>
	</div>
	<div class="main-area">
	<div class="main-menu d-flex flex-wrap align-items-center justify-content-center w-100">
	<ul class="lab-ul">
	<li class="active">
	<a href="#0">Home</a>
	<ul class="lab-ul">
	<li class="active"><a href="index.html">Home Page One</a></li>
	<li><a href="index-2.html">Home Page Two</a></li>
	</ul>
	</li>
	<li><a href="about.html">About</a></li>
	<li>
	<a href="#0">Pages</a>
	<ul class="lab-ul">
	<li>
	<a href="#0">Services</a>
	<ul class="lab-ul">
	<li><a href="service.html">Service</a></li>
	<li><a href="service-single.html">Service Single</a></li>
	</ul>
	</li>
	<li>
	<a href="#0">Portfolios</a>
	<ul class="lab-ul">
	<li><a href="portfolio.html">Portfolio style 1</a></li>
	<li><a href="portfolio-2.html">Portfolio style 2</a></li>
	<li><a href="portfolio-single.html">Portfolio style 3</a></li>
	</ul>
	</li>
	<li><a href="team.html">Team Membar</a></li>
	<li><a href="timetable.html">Time Table</a></li>
	<li><a href="history.html">History Page</a></li>
	<li><a href="404.html">404 Page</a></li>
	</ul>
	</li>
	<li>
	<a href="#0">Blog</a>
	<ul class="lab-ul">
	<li><a href="blog.html">Blog Style 1</a></li>
	<li><a href="blog-2.html">Blog style 2</a></li>
	<li><a href="blog-3.html">Blog style 3</a></li>
	<li><a href="blog-single.html">Blog Details</a></li>
	</ul>
	</li>
	<li>
	<a href="#0">Shop</a>
	<ul class="lab-ul">
	<li><a href="shop.html">Products Page</a></li>
	<li><a href="shop-single.html">Products Details</a></li>
	<li><a href="cart-page.html">Cart Page</a></li>
	</ul>
	</li>
	<li><a href="contact.html">Contact</a></li>
	</ul>
	<ul class="lab-ul search-cart">
	<li>
	<div class="search-option">
	<div class="icon icon-search"><i class="icofont-search-2"></i></div>
	</div>
	</li>
	<li>
	<div class="cart-option">
	<div class="icon icon-check"><i class="icofont-cart-alt"></i></div>
	<span class="count-item">2</span>
	<div class="cart-content">
	<div class="cart-item">
	<div class="cart-img">
	<img src="assets/images/shop/01.jpg" alt="cart">
	</div>
	<div class="cart-des">
	<a href="#">Product Title Hore</a>
	<p>$20.00</p>
	</div>
	<div class="cart-btn">
	<a href="#"><i class="icofont-close-circled"></i></a>
	</div>
	</div>
	<div class="cart-item">
	<div class="cart-img">
	<img src="assets/images/shop/02.jpg" alt="cart">
	</div>
	<div class="cart-des">
	<a href="#">Product Title Hore</a>
	<p>$20.00</p>
	</div>
	<div class="cart-btn">
	<a href="#"><i class="icofont-close-circled"></i></a>
	</div>
	</div>
	<div class="cart-bottom">
	<div class="cart-subtotal">
	<p>Total: <b class="float-right">$40.00</b></p>
	</div>
	<div class="cart-action">
	<a href="#" class="lab-btn"><span>View Cart</span></a>
	<a href="#" class="lab-btn"><span>Check Out</span></a>
	</div>
	</div>
	</div>
	</div>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	</div>
	</header>

	<!-- footer section start here -->
	<footer class="relative">
	<div class="pattan-shape"></div>
	<div class="footer-top-area">
	<div class="ft-top-abs-area">
	<div class="container">
	<div class="ft-top">
	<div class="ft-item">
	<div class="ft-thumb">
	<img src="assets/images/footer/icon/01.png" alt="footer">
	</div>
	<div class="ft-content">
	<p><i>Give us a Call</i></p>
	<h6>+882-888-123-4567</h6>
	</div>
	</div>
	<div class="ft-item">
	<div class="ft-thumb">
	<img src="assets/images/footer/icon/02.png" alt="footer">
	</div>
	<div class="ft-content">
	<p><i>Send us a Message</i></p>
	<h6>medicap@gmail.com</h6>
	</div>
	</div>
	<div class="ft-item">
	<div class="ft-thumb">
	<img src="assets/images/footer/icon/03.png" alt="footer">
	</div>
	<div class="ft-content">
	<p><i>Visit our Location</i></p>
	<h6>07 Suitland Street 120 USA</h6>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="footer-top">
	<div class="container">
	<div class="ft-bottom">
	<div class="row justify-content-center g-0">
	<div class="col-xl-4 col-lg-6 col-12">
	<div class="ft-about-part">
	<div class="bg-asb-thumb"></div>
	<div class="ft-title">
	<h4>About Our medicap</h4>
	</div>
	<div class="ft-body">
	<p>Assertvely communicate mission critical agnments economically sound communities through dynamic Phosfluoresc internal sources</p>
	<a href="#" class="lab-btn"><span>View Website <i class="icofont-double-right"></i></span></a>
	</div>
	</div>
	</div>
	<div class="col-xl-4 col-lg-6 col-12">
	<div class="ft-opening-part">
	<div class="ft-title">
	<h4>Our Opening Hours</h4>
	</div>
	<div class="ft-body">
	<ul class="lab-ul">
	<li><span>Satarday</span><span>09:00 am-10:00 pm</span></li>
	<li><span>Sunday</span><span>09:00 am-10:00 pm</span></li>
	<li><span>Monday</span><span>09:00 am-10:00 pm</span></li>
	<li><span>Tuesday</span><span>09:00 am-10:00 pm</span></li>
	<li><span>Widnessday</span><span>09:00 am-10:00 pm</span></li>
	<li><span>Thirsday</span><span>09:00 am-10:00 pm</span></li>
	<li><span>Friday</span><span>09:00 am-10:00 pm</span></li>
	</ul>
	</div>
	</div>
	</div>
	<div class="col-xl-4 col-lg-6 col-12">
	<div class="ft-map-area">
	<div class="ft-map">
	<iframe src="https://maps.google.com/maps?q=new%40codexcoder&t=&z=17&ie=UTF8&iwloc=&output=embed" style="border:0" allowfullscreen></iframe>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="footer-bottom bg-ash">
	<div class="container">
	<div class="section-wrapper">
	<div class="left">
	<img src="assets/images/logo/02.png" alt="footer-logo">
	</div>
	<ul class="right lab-ul">
	<li>
	<a class="facebook" href="#"><i class="icofont-facebook"></i></a>
	<span>Facebook</span>
	</li>
	<li>
	<a class="google" href="#"><i class="icofont-google-plus"></i></a>
	<span>Google Plus</span>
	</li>
	<li>
	<a class="twitter" href="#"><i class="icofont-twitter"></i></a>
	<span>Twitter</span>
	</li>
	<li>
	<a class="pinterest" href="#"><i class="icofont-pinterest"></i></a>
	<span>Pinterest</span>
	</li>
	<li>
	<a class="linkedin" href="#"><i class="icofont-linkedin"></i></a>
	<span>Linkedin</span>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	<div class="copy-right-part">
	<div class="container">
	<div class="row justify-content-center">
	<div class="col-12">
	<p>&copy; 2020 <a href="index.html">medicap</a>Designed By <a href="https://themeforest.net/user/Labartisan/portfolio" target="_blank">Labartisan</a></p>
	</div>
	</div>
	</div>
	</div>
	</footer>
	<!-- footer section ending here -->
	</div>

	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.bundle.min.js"></script>
	<script src="assets/js/isotope.pkgd.min.js"></script>
	<script src="assets/js/jquery.countdown.min.js"></script>
	<script src="assets/js/lightcase.js"></script>
	<script src="assets/js/swiper.min.js"></script>
	<script src="assets/js/waypoints.min.js"></script>
	<script src="assets/js/wow.min.js"></script>
	<script src="assets/js/functions.js"></script>
	</body>
	</html>

 

CSS Structure

We are using several CSS files in this Template. codexcoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

CSS Fiile Included

  • Animate css used
  • Bootstrap css used
  • Lightcase used
  • Favicon used
  • Icofont used
  • Swiper Slider used
  • medicap CSS used
  • and some other necessary css files 
style.css situated on assets/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :
 
 
	
 

	/*!
	Template Name: medicap
	Template URI: https://themeforest.net/user/labartisan
	Author: labartisan.net
	Author URI: https://themeforest.net/user/labartisan
	Description: Medical Health & Pregnancy Care Clinic HTML Template
	Version: 1.0.0
	Text Domain: medicap
	Tags: counseling, counseling services, counselor, dental, dentist, health, healthcare, individual psychologists, medical, psychiatrist, psychologist, psychology, therapist, therapy

	*/
	/*--------------------------------------------------------------
	>>> TABLE OF CONTENTS:
	----------------------------------------------------------------
	# Normalize
	# Typography
	# Global CSS
	# Header CSS
		* Style-1
		* Style-2
	# Page Header
	# Banner
		*Style-1
		*Style-2
	# About
		* Style-1
		* Style-2
	# Service
		* Style-1
		* Style-2
		* Style-3
		* Style-4
		* Service Single
	# Single Sidebar
	# Team
		* Team Single
	# Contact
		* Style-1
		* Style-2
	# Testimonial
	# Blog
		* Style-1
		* Style-2
		* Style-3
		* Blog Single
	# Blog Widget
	# Department
	# Counter
	# Safe Actions
	# Clients Section
	# Care Section
	# Sponsor
	# Schedule Section
	# Portfolio Section
	# Contact Us
	# Timeline
	# Shop Page
	# Shop Single
	# Cart Page
	# Fore Zero Page



>>> TABLE OF CONTENTS END:
@@@@@@@@@@@@@@@@@@@@@@ */

	@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap");
	@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; }

	body {
	margin: 0;
	padding: 0;
	background: #fff; }

	.body-wrap .shape-1, .body-wrap .shape-2 {
	z-index: 1; }
	@media (min-width: 992px) {
	.body-wrap .shape-1 {
	top: 0;
	left: 0;
	background: #71b987;
	-webkit-clip-path: polygon(50% 0, 0 0, 0 100%);
	clip-path: polygon(50% 0, 0 0, 0 100%);
	width: 100%;
	height: 2000px; } }
	@media (min-width: 992px) {
	.body-wrap .shape-2 {
	bottom: 0;
	right: 0;
	background: #71b987;
	-webkit-clip-path: polygon(100% 0, 50% 100%, 100% 100%);
	clip-path: polygon(100% 0, 50% 100%, 100% 100%);
	width: 100%;
	height: 2000px; } }

	/*--------------------------------------------------------------
	# Typography
	--------------------------------------------------------------*/
	body,
	button,
	input,
	select,
	optgroup,
	textarea {
	color: #555555;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	line-height: 1.5; }

	h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, a h1, a h2, a h3, a h4, a h5, a h6 {
	clear: both;
	font-weight: 700;
	line-height: 1.4;
	font-family: "Roboto", sans-serif;
	color: #2d334d; }

	h1 {
	font-size: 60px; }

	h2 {
	font-size: 24px; }

	h3 {
	font-size: 30px; }

	h4 {
	font-size: 24px; }

	h5 {
	font-size: 20px; }

	h6 {
	font-size: 18px; }

	@media (min-width: 576px) {
	h1 {
	font-size: 60px; }

	h2 {
	font-size: 36px; }

	h3 {
	font-size: 30px; }

	h4 {
	font-size: 24px; }

	h5 {
	font-size: 20px; }

	h6 {
	font-size: 18px; } }
	p {
	margin-bottom: 15px;
	font-weight: 400;
	font-size: 15px; }
	@media (min-width: 576px) {
	p {
	font-size: 16px; } }

	a {
	color: #2d334d;
	text-decoration: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease; }

	a:visited {
	outline: none; }

	a:hover, a:focus, a:active {
	text-decoration: none;
	outline: none; }

	a:focus {
	outline: thin dotted;
	outline: none; }

	a:hover, a:active {
	outline: 0; }

	img {
	height: auto;
	max-width: 100%; }

	input, textarea {
	width: 100%;
	margin-bottom: 15px;
	border: 1px solid #f6f9fb;
	outline: none;
	padding: 12px 20px;
	outline: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; }

	select {
	border: 1px solid #f6f9fb; }
	
 
 
 
	
 

	

	/* @@@@@@@@@@@@@ Global CSS @@@@@@@@@@@@@@ */
	.padding-tb {
	padding-top: 80px;
	padding-bottom: 55px; }
	@media (min-width: 992px) {
	.padding-tb {
	padding-top: 110px;
	padding-bottom: 95px; } }

	.lab-btn {
	display: inline-block;
	padding: 13px 25px;
	background: #71b987;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; }
	.lab-btn span {
	z-index: 1;
	position: relative;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase; }
	.lab-btn:hover {
	background: #ff736e;
	box-shadow: 0 5px 10px rgba(255, 51, 114, 0.3); }
	.lab-btn.style-2 {
	background: transparent;
	border: 2px solid #fff; }
	.lab-btn.style-2 span {
	color: #71b987; }

	.text-btn {
	outline: none;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 14px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease; }
	.text-btn::after {
	content: "\ea98" !important;
	top: 49%;
	right: -15px;
	transform: translateY(-50%);
	font-weight: 500;
	font-family: IcoFont !important; }
	.text-btn:hover {
	padding-left: 10px; }

	.primary-color {
	color: #ff736e;
	font-family: "Libre Baskerville", serif; }

	.inline-block {
	display: inline-block; }

	.scrollToTop {
	position: fixed;
	bottom: -30%;
	right: 5%;
	z-index: 9;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	font-size: 24px;
	animation: lab_top_up 5s linear infinite;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease; }
	.scrollToTop i {
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	color: #fff;
	width: 40px;
	height: 40px;
	line-height: 40px;
	z-index: 1;
	top: 0;
	left: 0;
	background: #71b987; }
	.scrollToTop:hover {
	background: #ff736e; }

	.lab-ul {
	padding: 0;
	margin: 0; }
	.lab-ul li {
	list-style: none; }
	.lab-ul.icon-style-list {
	margin: 0; }
	.lab-ul.icon-style-list > li {
	padding: 0;
	border-bottom: 1px solid #f6f9fb;
	justify-content: flex-start; }
	.lab-ul.icon-style-list > li:first-child {
	border-top: 1px solid #f6f9fb; }
	.lab-ul.icon-style-list > li i {
	width: 50px;
	text-align: center;
	color: #c2c2c2;
	margin: 0 15px 0 5px;
	line-height: 50px;
	display: inline-block; }
	.lab-ul.icon-style-list > li i:after {
	width: 100%;
	height: calc(100% + 18px);
	border-left: 1px solid #f6f9fb;
	border-right: 1px solid #f6f9fb;
	top: -9px;
	left: 0; }
	.lab-ul.icon-style-list > li span {
	width: calc(100% - 70px); }
	.lab-ul.icon-style-list > li span.social-media {
	width: auto;
	display: inline-block; }
	.lab-ul.icon-style-list > li ul {
	margin: 0; }
	.lab-ul.icon-style-list > li ul li {
	padding: 0;
	border: none; }
	.lab-ul.icon-style-list > li ul li a {
	display: inline-block;
	background: transparent; }
	.lab-ul.icon-style-list > li ul li a i {
	margin: 0; }
	.lab-ul.icon-style-list > li ul li a i::after {
	display: none; }
	.lab-ul.icon-style-list > li ul li a.twitter i {
	color: #55acee; }
	.lab-ul.icon-style-list > li ul li a.facebook i {
	color: #3b5998; }
	.lab-ul.icon-style-list > li ul li a.instagram i {
	color: #e4405f; }
	.lab-ul.icon-style-list > li ul li a.vimeo i {
	color: #3b5998; }
	.lab-ul.icon-style-list > li ul li a.google i {
	color: #dd4b39; }
	.lab-ul.icon-style-list > li ul li a.pinterest i {
	color: #bd081c; }
	.lab-ul.icon-style-list > li ul li a.basketball i {
	color: #e94c89; }
	.lab-ul.icon-style-list > li ul li a.behance i {
	color: #1769ff; }

	.mask_img {
	-webkit-mask-position: center center;
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat; }

	.bg-ash {
	background: #f6faff; }

	.bg-theme {
	background: #71b987; }

	.bg-primary {
	background: #ff736e !important; }

	.bg-primary-2 {
	background: #7dcd00; }

	.bg-primary-3 {
	background: #9160ff; }

	.bg-yellow {
	background: #ffac00; }

	.white-color {
	color: #fff; }

	.title-color {
	color: #fff; }

	.desc-color {
	color: #fff; }

	.theme-color {
	color: #71b987; }

	.primary-color, .color-primary {
	color: #ff736e !important; }

	.border-color {
	color: #fff; }

	.ash-color {
	color: #fff; }

	.yellow-color {
	color: #ffac00; }

	.pattan-shape {
	top: 0;
	width: 50%;
	height: 100%;
	background: url(../../assets/images/about/pattan.png); }

	.fade.in.active {
	opacity: 1; }

	.bg_img {
	background-size: 100% 100%; }

	.padding-60 {
	padding: 60px 0; }

	.padding-30 {
	padding: 30px; }

	.shadow-4 {
	box-shadow: 0 3px 4px rgba(0, 25, 67, 0.1);
	-webkit-box-shadow: 0 3px 4px rgba(0, 25, 67, 0.1); }

	.shadow-8 {
	box-shadow: 0 0 8px rgba(136, 136, 136, 0.08);
	-webkit-box-shadow: 0 0 8px rgba(136, 136, 136, 0.08); }

	.shadow-10 {
	box-shadow: 0 0 10px rgba(136, 136, 136, 0.1);
	-webkit-box-shadow: 0 0 10px rgba(136, 136, 136, 0.1); }

	.facebook {
	background: #3b5998; }
	.facebook:hover {
	background: #fff;
	border-color: #3b5998 !important; }
	.facebook:hover i {
	color: #3b5998; }
	.facebook i {
	color: #fff; }

	.twitter {
	background: #55acee;
	border-color: #55acee !important; }
	.twitter i {
	color: #fff; }
	.twitter:hover {
	background: #fff; }
	.twitter:hover i {
	color: #55acee; }

	.twitter-sm {
	background: #55acee; }
	.twitter-sm:hover {
	background: #fff;
	border-color: #55acee; }
	.twitter-sm:hover i {
	color: #55acee; }
	.twitter-sm i {
	color: #fff; }

	.google {
	background: #dd4b39; }
	.google:hover {
	background: #fff;
	border-color: #dd4b39 !important; }
	.google:hover i {
	color: #dd4b39; }
	.google i {
	color: #fff; }

	.linkedin {
	background: #007bb5; }
	.linkedin:hover {
	background: #fff;
	border-color: #007bb5 !important; }
	.linkedin:hover i {
	color: #007bb5; }
	.linkedin i {
	color: #fff; }

	.instagram {
	background: #e4405f; }
	.instagram:hover {
	background: #fff;
	border-color: #e4405f !important; }
	.instagram:hover i {
	color: #e4405f; }
	.instagram i {
	color: #fff; }

	.tumblr {
	background: #34465d; }
	.tumblr:hover {
	background: #fff;
	border-color: #34465d !important; }
	.tumblr:hover i {
	color: #34465d; }
	.tumblr i {
	color: #fff; }

	.behance {
	background: #1769ff; }
	.behance:hover {
	background: #fff;
	border-color: #1769ff !important; }
	.behance:hover i {
	color: #1769ff; }
	.behance i {
	color: #fff; }

	.youtube {
	background: #cd201f; }
	.youtube:hover {
	background: #fff;
	border-color: #cd201f !important; }
	.youtube:hover i {
	color: #cd201f; }
	.youtube i {
	color: #fff; }

	.pinterest {
	background: #bd081c; }
	.pinterest:hover {
	background: #fff;
	border-color: #bd081c !important; }
	.pinterest:hover i {
	color: #bd081c; }
	.pinterest i {
	color: #fff; }

	.search-cart {
	margin-left: 30px !important; }
	.search-cart li {
	margin-right: 10px; }
	.search-cart li .icon {
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #fff;
	display: inline-block;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%; }
	.search-cart li .icon.icon-check {
	background: #71b987; }
	.search-cart li .icon.icon-search {
	background: #ff736e; }
	.search-cart li:last-child {
	margin-right: 0; }
	.search-cart li .cart-option.open .cart-content {
	transform: scaleY(1); }
	.search-cart li .cart-option .count-item {
	display: inline-block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	font-weight: 500;
	background: #fff;
	color: #ff736e;
	font-size: 12px;
	top: 0;
	right: 0;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	box-shadow: 0 0 2px rgba(136, 136, 136, 0.3); }
	.search-cart li .cart-content {
	width: 320px;
	right: 0;
	top: 64px;
	background: #fff;
	z-index: 9999;
	padding: 10px;
	transform-origin: top;
	transform: scaleY(0);
	-webkit-border-radius: 0 0 6px 6px;
	-moz-border-radius: 0 0 6px 6px;
	border-radius: 0 0 6px 6px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	box-shadow: 0 0 5px rgba(136, 136, 136, 0.1); }
	.search-cart li .cart-content .cart-item {
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid #f6f9fb;
	justify-content: space-between; }
	.search-cart li .cart-content .cart-item a {
	padding: 0 !important; }
	.search-cart li .cart-content .cart-item .cart-img {
	width: 90px;
	height: 90px; }
	.search-cart li .cart-content .cart-item .cart-des {
	width: calc(100% - 100px);
	text-align: left; }
	.search-cart li .cart-content .cart-item .cart-des a {
	font-weight: 700;
	color: #2d334d !important;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease; }
	.search-cart li .cart-content .cart-item .cart-des a:hover {
	color: #71b987 !important; }
	.search-cart li .cart-content .cart-item .cart-des p {
	margin-bottom: 0; }
	.search-cart li .cart-content .cart-item .cart-des a, .search-cart li .cart-content .cart-item .cart-des p {
	line-height: 1.5; }
	.search-cart li .cart-content .cart-item .cart-btn {
	width: 20px;
	height: 20px;
	top: 0;
	right: 0;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 0 3px rgba(8, 136, 136, 0.08);
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease; }
	.search-cart li .cart-content .cart-item .cart-btn a {
	color: #2d334d; }
	.search-cart li .cart-content .cart-item .cart-btn:hover a {
	color: #71b987; }
	.search-cart li .cart-content .cart-bottom .cart-action a {
	padding: 10px 20px !important;
	line-height: 1.5 !important;
	display: inline-block !important;
	font-size: 14px !important; }
	.search-cart li .cart-content .cart-bottom .cart-action a:hover {
	background: #ff736e; }

	.search-input {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #040300cc;
	z-index: 9999;
	text-align: center;
	transform: scaleY(0);
	-webkit-transition: 0.5s ease;
	-moz-transition: 0.5s ease;
	transition: 0.5s ease; }
	.search-input.open {
	transform: scaleY(1); }
	.search-input .search-close {
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 30px;
	text-align: center;
	color: #fff;
	top: 5%;
	right: 5%;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease; }
 

Js Structure

We are using several Js files in this Template. codexcoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset Js file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

Js Fiile Included

  • jquery.js used
  • fontawesome.js used
  • lightcase.js used
  • jquery-ui.js used
  • bootstrap.min.js used
  • progress.js used
  • tab.js used
  • wow.min.js used
  • swiper.min.js used
  • active.js used
  • and some other necessary css files 
functions.js situated on assets/css/ contain the the all necessary custom style which is well organized and following are the functions.js file structure :
	
 

	(function($){
	"use strict";
	$(window).on('load', function(){
	$('.preloader').fadeOut(1000);
	})

	$(document).ready(function(){
	// lightcase
	$('a[data-rel^=lightcase]').lightcase();

	// search cart option
	$(document).on('click','.cart-option .icon-check',function(){
	$(".cart-option").toggleClass("open");
	});
	$(document).on('click','.search-option .icon-search, .search-close',function(){
	$(".search-input").toggleClass("open");
	});

	// Header Section Menu Part
	$("ul li ul").parent("li").addClass("menu-item-has-children");
	$(".shop-menu>li .shop-submenu").parent("li").children("a").addClass("dd-icon-down");

	// drop down menu width overflow problem fix
	$('ul').parent().on('hover', function() {
	var menu = $(this).find("ul");
	var menupos = $(menu).offset();
	if (menupos.left + menu.width() > $(window).width()) {
	var newpos = -$(menu).width();
	menu.css({ left: newpos });
	}
	});

	// mobile menu responsive
	$(document).on('click','.header-bar',function(){
	$(".header-bar").toggleClass("close");
	$(".mobile-menu").toggleClass("open");
	});

	//mobile drodown menu display
	$('.mobile-menu-area ul li a, .shop-menu li a').on('click', function(e) {
	var element = $(this).parent('li');
	if (element.hasClass('open')) {
	element.removeClass('open');
	element.find('li').removeClass('open');
	element.find('ul').slideUp(1000,"swing");
	}
	else {
	element.addClass('open');
	element.children('ul').slideDown(1000,"swing");
	element.siblings('li').children('ul').slideUp(1000,"swing");
	element.siblings('li').removeClass('open');
	element.siblings('li').find('li').removeClass('open');
	element.siblings('li').find('ul').slideUp(1000,"swing");
	}
	});

	//menu options
	var fixed_top = $(".header-area, .mobile-header");
	$(window).on('scroll', function(){
	if( $(this).scrollTop() > 100 ){
	fixed_top.addClass("animated fadeInDown menu-fixed");
	}
	else{
	fixed_top.removeClass("animated fadeInDown menu-fixed");
	}
	});

	// scroll up start here
	$(function(){
	//Check to see if the window is top if not then display button
	$(window).scroll(function(){
	if ($(this).scrollTop() > 300) {
	$('.scrollToTop').css({'bottom':'2%', 'opacity':'1','transition':'all .5s ease'});
	} else {
	$('.scrollToTop').css({'bottom':'-30%', 'opacity':'0','transition':'all .5s ease'})
	}
	});
	//Click event to scroll to top
	$('.scrollToTop').on('click', function(){
	$('html, body').animate({scrollTop : 0},500);
	return false;
	});
	});

	//Isotope
	jQuery(window).on('load',function() {
	var $grid = $('.grid').isotope({
	itemSelector: '.product-item',
	masonry: {
	columnWidth: 0
	}
	});
	// filter functions
	var filterFns = {
	// show if number is greater than 50
	numberGreaterThan50: function() {
	var number = $(this).find('.number').text();
	return parseInt( number, 10 ) > 50;
	},
	// show if name ends with -ium
	ium: function() {
	var name = $(this).find('.name').text();
	return name.match( /ium$/ );
	}
	};
	// bind filter button click
	$('.product-filter-name').on( 'click', 'li', function() {
	var filterValue = $( this ).attr('data-filter');
	// use filterFn if matches value
	filterValue = filterFns[ filterValue ] || filterValue;
	$grid.isotope({ filter: filterValue });
	});
	// change is-checked class on buttons
	$('.product-filter-name').each( function( i, buttonGroup ) {
	var $buttonGroup = $( buttonGroup );
	$buttonGroup.on( 'click', 'li', function() {
	$buttonGroup.find('.active').removeClass('active');
	$( this ).addClass('active');
	});
	});
	});

	// Banner slider
	var swiper = new Swiper('.banner-slider', {
	slidesPerView: 1,
	autoplay: {
	delay: 10000,
	disableOnInteraction: false,
	},
	navigation: {
	nextEl: '.banner-next',
	prevEl: '.banner-prev',
	},
	loop: true,
	});

	// testi slider
	var swiper = new Swiper('.testimonial-slider', {
	// slidesPerView: 1,
	// autoplay: {
	// delay: 10000,
	// disableOnInteraction: false,
	// },
	loop: true,
	});

	// slider-product
	var swiper = new Swiper('.slider-product', {
	slidesPerView: 1,
	autoplay: {
	delay: 10000,
	disableOnInteraction: false,
	},
	pagination: {
	el: '.slider-product-pagination',
	clickable: true,
	},
	loop: true,
	});

	// sponsor slider
	var swiper = new Swiper('.sponsor-slider', {
	slidesPerView: 5,
	autoplay: {
	delay: 5000,
	disableOnInteraction: false,
	},
	breakpoints: {
	992: {
	slidesPerView: 3,
	},
	576: {
	slidesPerView: 2,
	},
	420: {
	slidesPerView: 1,
	},
	},
	loop: true,
	});

	// post-thumb-slider section
	var swiper = new Swiper('.post-thumb-slider', {
	slidesPerView: 1,
	autoplay: {
	delay: 5000,
	disableOnInteraction: false,
	},
	navigation: {
	nextEl: '.post-thumb-slider-next',
	prevEl: '.post-thumb-slider-prev',
	},
	loop: true,
	});

	// counterup js start here
	$('.count-number').each(function () {
	var size = $(this).text().split(".")[1] ? $(this).text().split(".")[1].length : 0;
	$(this).prop('Counter', 0).animate({
	Counter: $(this).text()
	}, {
	duration: 8000,
	step: function (func) {
	$(this).text(parseFloat(func).toFixed(size));
	}
	});
	});

	// counter up start
	// $('.counter').counterUp({
	// delay: 10,
	// time: 2000
	// });

	// product view mode change js
	$(function() {
	$('.product-view-mode').on('click', 'a', function (e) {
	e.preventDefault();
	var shopProductWrap = $('.shop-product-wrap');
	var viewMode = $(this).data('target');
	$('.product-view-mode a').removeClass('active');
	$(this).addClass('active');
	shopProductWrap.removeClass('grids lists').addClass(viewMode);
	});
	});

	// shop cart + - start here
	var CartPlusMinus = $('.cart-plus-minus');
	CartPlusMinus.prepend('<div class="dec qtybutton">-</div>');
	CartPlusMinus.append('<div class="inc qtybutton">+</div>');
	$(".qtybutton").on("click", function() {
	var $button = $(this);
	var oldValue = $button.parent().find("input").val();
	if ($button.text() === "+") {
	var newVal = parseFloat(oldValue) + 1;
	} else {
	if (oldValue > 0) {
	var newVal = parseFloat(oldValue) - 1;
	} else {
	newVal = 1;
	}
	}
	$button.parent().find("input").val(newVal);
	});

	// product view mode change js
	$(function() {
	$('.product-view-mode').on('click', 'a', function (e) {
	e.preventDefault();
	var shopProductWrap = $('.shop-product-wrap');
	var viewMode = $(this).data('target');
	$('.product-view-mode a').removeClass('active');
	$(this).addClass('active');
	shopProductWrap.removeClass('grid list').addClass(viewMode);
	});
	});

	// sop single slider
	var galleryThumbs = new Swiper('.gallery-thumbs', {
	spaceBetween: 10,
	slidesPerView: 5,
	freeMode: true,
	watchSlidesVisibility: true,
	watchSlidesProgress: true,
	breakpoints: {
	768: {
	slidesPerView: 3,
	},
	576: {
	slidesPerView: 2,
	}
	}
	});
	var galleryTop = new Swiper('.gallery-top', {
	spaceBetween: 10,
	autoplay: {
	delay: 10000,
	disableOnInteraction: false,
	},
	navigation: {
	nextEl: '.shop-slider-next',
	prevEl: '.shop-slider-prev',
	},
	thumbs: {
	swiper: galleryThumbs
	},
	loop: true,
	});

	//Review Tabs
	$('ul.review-nav').on('click', 'li', function (e) {
	e.preventDefault();
	var reviewContent = $('.review-content');
	var viewRev = $(this).data('target');
	$('ul.review-nav li').removeClass('active');
	$(this).addClass('active');
	reviewContent.removeClass('review-content-show description-show').addClass(viewRev);
	});

	// skill bar or progress bar & Isotope
	$(window).on('load',function() {
	var $grid = $('.grid').isotope({
	itemSelector: '.port-item',
	masonry: {
	columnWidth: 0
	}
	});
	var filterFns = {
	numberGreaterThan50: function() {
	var number = $(this).find('.number').text();
	return parseInt( number, 10 ) > 50;
	},
	ium: function() {
	var name = $(this).find('.name').text();
	return name.match( /ium$/ );
	}
	};
	$('.port-filter').on( 'click', 'li', function() {
	var filterValue = $( this ).attr('data-filter');
	filterValue = filterFns[ filterValue ] || filterValue;
	$grid.isotope({ filter: filterValue });
	});
	$('.port-filter').each( function( i, buttonGroup ) {
	var $buttonGroup = $( buttonGroup );
	$buttonGroup.on( 'click', 'li', function() {
	$buttonGroup.find('.active').removeClass('active');
	$( this ).addClass('active');
	});
	});

	// skill bar or progress bar
	// var skillLevel1 = jQuery('.first').data('percent');
	// $('.first.circle').circleProgress({
	// value: '0.' + skillLevel1,
	// fill: {gradient: ['#2dca73']}
	// }).on('circle-animation-progress', function(event, progress) {
	// $(this).find('strong').html(Math.round(skillLevel1 * progress) + '<i>%</i>');
	// });
	// //Circle ProgressBarTwo
	// var skillLevel2 = jQuery('.second').data('percent');
	// $('.second.circle').circleProgress({
	// value: '0.' + skillLevel2,
	// fill: {gradient: ['#ff7d51']}
	// }).on('circle-animation-progress', function(event, progress) {
	// $(this).find('strong').html(Math.round(skillLevel2 * progress) + '<i>%</i>');
	// });
	// //Circle ProgressBarThree
	// var skillLevel3 = jQuery('.third').data('percent');
	// $('.third.circle').circleProgress({
	// value: '0.' + skillLevel3,
	// fill: {gradient: ['#ffc212']}
	// }).on('circle-animation-progress', function(event, progress) {
	// $(this).find('strong').html(Math.round(skillLevel3 * progress) + '<i>%</i>');
	// });
	});

	$(function() {
	var galleryThumbs = new Swiper('.pro-single-thumbs', {
	spaceBetween: 10,
	slidesPerView: 3,
	loop: true,
	freeMode: true,
	loopedSlides: 5,
	watchSlidesVisibility: true,
	watchSlidesProgress: true,
	navigation: {
	nextEl: '.pro-single-next',
	prevEl: '.pro-single-prev',
	},
	});
	var galleryTop = new Swiper('.pro-single-top', {
	spaceBetween: 10,
	loop:true,
	loopedSlides: 5,
	thumbs: {
	swiper: galleryThumbs,
	},
	});
	});

	// wow animation
	new WOW().init();
	});
	}(jQuery));


	
 
 

Credits

jQuery
CSS & Fonts